import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';

// 获取屏幕的宽度
const screenWidth = Dimensions.get('window').width;

// 定义一个函数式组件，接受一个props参数，其中包含一个数值（范围是0-100）
const ProgressBar = (props) => {
    // 获取传入的数值
    const value = props.value;
    const percent = props.percent;
    // 计算进度条的宽度，是父元素宽度的80%乘以数值的百分比
    // const barWidth = screenWidth * 0.8 * value / 100;
    const barWidth = String(percent) + '%';
    // 返回一个View组件，设置样式为宽度撑满父元素宽度的100%和背景色为#f7f7f7
    return (
        <View style={[styles.container]}>
            <View style={styles.TopBox}>
                <Text style={[styles.text, styles.title]}>{props.title}</Text>
                <Text style={styles.text}>{value} | {barWidth}</Text>
            </View>
            {/* 渲染一个背景色为#8177e5的进度条，宽度是根据数值动态计算的 */}
            <View style={[styles.bar, { width: '100%', backgroundColor: '#f7f7f7' }]}>
                <View style={[styles.bar, { width: barWidth }]} />
            </View>

            {/* 渲染一个灰色的字显示值加百分号 */}
            {/* <Text style={styles.text}>{value}%</Text> */}
        </View>
    );
};

// 定义样式对象
const styles = StyleSheet.create({
    container: {
        // flexDirection: 'row', // 设置子元素为水平排列
        // alignItems: 'center', // 设置子元素垂直居中对齐
        width: '100%', // 设置宽度为100%
        marginBottom: 10
    },
    bar: {
        height: 5, // 设置高度为20
        backgroundColor: '#8177e5', // 设置背景色为#8177e5
        borderRadius: 10, // 设置圆角为10
    },
    title: {
        fontSize: 14,
        color: 'black'
    },
    text: {
        // marginLeft: 10, // 设置左边距为10
        color: 'gray', // 设置字体颜色为灰色
        fontSize: 12, // 设置字体大小为16
    },
    TopBox: {
        width: '100%',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 10
        // height: 10
    }
});

// 导出组件
export default ProgressBar;
